<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>register</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/register.css">
<link rel="stylesheet" href="css/bootstrapValidator.min.css">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/register.js"></script>
<script src="js/bootstrapValidator.min.js"></script>
<script src="js/zh_CN.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<div class="pull-left">
					<a href="http://localhost:8080/distribute-portal/"><img
						src="images/PETCLUB2.png" alt="" /></a>
				</div>
			</div>
			<div class="col-md-3 col-md-offset-9 col-xs-offset-8 col-xs-4"
				style="padding-top: 6%">
				<div class="panel panel-info">
					<div class="panel-heading" style="text-align: center">
						<a href="http://localhost:8080/distribute-portal/"><i
							class="glyphicon glyphicon-home" style="font-size: 200%">PETCLUB</i></a>
					</div>
					<div class="panel-body well">
						<form method="post" id="personRegForm">
							<div class="form-group">
								<div class="input-group ">
									<span class="input-group-addon"><i
										class="glyphicon glyphicon-user"></i></span><input
										class="form-control" id="regName" type="text" name="username"
										placeholder="用户名" />
								</div>
							</div>
							<div class="form-group">
								<div class="input-group ">
									<span class="input-group-addon"><i
										class="glyphicon glyphicon-phone"></i></span><input
										class="form-control" id="phone" type="text" name="phone"
										placeholder="手机号码" />
								</div>
							</div>
							<div class="form-group">
								<div class="input-group ">
									<span class="input-group-addon"><i
										class="glyphicon glyphicon-envelope"></i></span><input
										class="form-control" id="email" type="text" name="email"
										placeholder="邮箱" />
								</div>
							</div>
							<div class="form-group">
								<div class="input-group ">
									<span class="input-group-addon"><i
										class="glyphicon glyphicon-lock"></i></span><input
										class="form-control" id="pwd" type="password" name="password"
										onpaste="return  false" autocomplete="off"
										placeholder="******" />
								</div>
							</div>
							<div class="form-group">
								<div class="input-group">
									<span class="input-group-addon"><i
										class="glyphicon glyphicon-repeat"></i></span><input
										class="form-control" id="pwdRepeat" type="password"
										name="cpassword" onpaste="return  false" autocomplete="off"
										placeholder="确认密码" />
								</div>
							</div>
							<div class="form-group">
								<div class="input-group">
									<input
										class="form-control <!-- btn btn-success btn-block registerBtn -->"
										type="submit" value="注册">
									<!-- onclick="REGISTER.reg();background: #3e8f3e"
										style="background: lightskyblue; border-left: solid lightskyblue; border-radius: 5%"> -->
									<span class="input-group-addon" style=""><i
										class="glyphicon glyphicon-registration-mark"></i></span>
								</div>
							</div>
						</form>
					</div>
					<div class="panel-footer">
						<div class="" style="text-align: center">
							已有帐号?&nbsp;<a href="page/login">立即登陆</a>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
	<script type="text/javascript">
		$(function() {
			formValidator();
			$("#personRegForm").submit(function(ev) {
				ev.preventDefault();
			});
			$(".registerBtn")
					.on(
							"click",
							function() {
								var bootstrapValidator = $("#personRegForm")
										.data('bootstrapValidator');
								bootstrapValidator.validate();
								if (bootstrapValidator.isValid()) {
									/*  $("#yourform").submit(); */  
									alert("isubmit");
									$
											.ajax({
												url : 'http://localhost:8080/distribute-sso/user/check/'
														+ escape($("#regName")
																.val())
														+ "/1?r="
														+ Math.random(),
												success : function(data) {
													if (data.data) {
														$("#pwdRepeat").attr(
																"disabled",
																"true");
														$
																.post(
																		'http://localhost:8080/distribute-sso/user/register',
																		$(
																				"#personRegForm")
																				.serialize(),
																		function(
																				data) {
																			if (data.status == 200) {
																				alert('用户注册成功，请登录！');
																				$("#pwdRepeat").attr(
																						"disabled",
																						"false");
																				REGISTER
																						.login();
																			} else {
																				alert("注册失败！");
																			}
																		});
													}else{
														alert("注册失败，用户名已被注册");
														$("#regName").select();
													}
												}

											});
								} else
									return;
							});
		});
		function formValidator() {
			/* boostrap validator */
			$('#personRegForm').bootstrapValidator({
				message : 'This value is not valid',
				feedbackIcons : {
					valid : 'glyphicon glyphicon-ok',
					invalid : 'glyphicon glyphicon-remove',
					validating : 'glyphicon glyphicon-refresh'
				},
				fields : {
					username : {
						message : '用户名验证失败',
						validators : {
							notEmpty : {
								message : '用户名不能为空'
							},
							stringLength : {
								min : 3,
								max : 18,
								message : '用户名长度必须在3到18位之间'
							},
							regexp : {
								regexp : /^[a-zA-Z0-9_]+$/,
								message : '用户名只能包含大写、小写、数字和下划线'
							}
						}
					},
					phone : {
						validators : {
							notEmpty : {
								message : '请输入手机号码！'
							},
							phone : {
								message : '手机号码格式有误',
								country : 'CN'
							},
						}
					},
					email : {
						validators : {
							notEmpty : {
								message : '请输入email'
							},
							emailAddress : {
								message : '邮箱地址格式有误'
							}
						}
					},
					password : {
						validators : {
							notEmpty : {
								message : '密码不能为空！'
							},
							stringLength : {
								min : 6,
								max : 18,
								message : '密码长度必须在6到18位之间'
							},
							different : {
								field : 'username',
								message : '密码不能与用户名一样'
							}
						}
					},
					cpassword : {
						validators : {
							notEmpty : {
								message : '请再次确认密码'
							},
							identical : {
								field : 'password',
								message : '两次输入的密码不一致'
							},
						}
					},
				},
				submitHandler : function(validator, form, submitButton) {

				}

			});
		}

		var REGISTER = {
			param : {
				//单点登录系统的url
				surl : "http://localhost:8080/distribute-sso"
			},
			/* inputcheck : function() {
				//不能为空检查
				if ($("#regName").val() == "") {
					alert("用户名不能为空");
					$("#regName").focus();
					return false;
				}
				if ($("#pwd").val() == "") {
					alert("密码不能为空");
					$("#pwd").focus();
					return false;
				}
				if ($("#email").val() == "") {
					alert("email 	` 不能为空");
					$("#email").focus();
					return false;
				}
				//密码检查
				if ($("#pwd").val() != $("#pwdRepeat").val()) {
					alert("确认密码和密码不一致，请重新输入！");
					$("#pwdRepeat").select();
					$("#pwdRepeat").focus();
					return false;
				}
				return true;
			}, */
			beforeSubmit : function() {
				//检查用户是否已经被占用,为了避免浏览器缓存，+了个随机数
				$.ajax({
					url : REGISTER.param.surl + "/user/check/"
							+ escape($("#regName").val()) + "/1?r="
							+ Math.random(),
					success : function(data) {
						if (data.data) {
							//检查手机号是否存在
							$.ajax({
								url : REGISTER.param.surl + "/user/check/"
										+ $("#email").val() + "/3?r="
										+ Math.random(),
								success : function(data) {
									if (data.data) {
										REGISTER.doSubmit();
									} else {
										alert("此邮箱已经被注册！");
										$("#email").select();
									}
								}
							});
						} else {
							alert("此用户名已经被占用，请选择其他用户名");
							$("#regName").select();
						}
					}
				});

			},
			doSubmit : function() {
				$.post(REGISTER.param.surl + "/user/register", $(
						"#personRegForm").serialize(), function(data) {
					if (data.status == 200) {
						alert('用户注册成功，请登录！');
						REGISTER.login();
					} else {
						alert("注册失败！");
					}
				});
			},
			login : function() {
				location.href = REGISTER.param.surl + "/page/login";
				return false;
			},
			reg : function() {
				if (this.inputcheck()) {
					this.beforeSubmit();
				}
			}
		};
	</script>
</body>
</html>